import React, { Component } from "react";
import "./download.less";
import ercode from "../../assets/images/otc.png";
import download1 from "../../assets/images/wotc1.jpg";
import download2 from "../../assets/images/wotc2.jpg";
import trust1 from "../../assets/images/wotc3.jpg";
import trust2 from "../../assets/images/wotc4.jpg";
import open from "../../assets/images/wotc5.jpg";

export default class Download extends Component {
  render() {
    return (
      <div className="app-download content">
        <ul className="ercode-ul">
          <li className="ercode-img">
            <img src={ercode} alt="二维码" />
          </li>
          <li className="ercode-text">
            <h3>下载 WOTC APP</h3>
            <img
              src=""
              alt="二维码"
            />
            <p>扫描上侧二维码下载到手机</p>
          </li>
        </ul>
        <h4>iOS 用户安装教程</h4>
        <ul className="download-ul">
          <li className="ios-one ios-text">
            <h3>1</h3>
            <div>下载 APP</div>
            <p>
              扫描二维码，点击右上角按钮,选择使用 Safari 浏览器
              <br />
              打开网址 选择“点击安装”，将APP安装至手机上。
            </p>
          </li>
          <li>
            <img style={{ width: 255, height: 453 }} alt="下载1" src={download1} />
            <img style={{ width: 255, height: 453 }} alt="下载2" src={download2} />
          </li>
        </ul>
        <ul className="trust-ul">
          <li>
            <img style={{ width: 255, height: 453 }} alt="信任1" src={trust1} />
            <img style={{ width: 255, height: 453 }} alt="信任2" src={trust2} />
          </li>
          <li className="ios-two ios-text">
            <h3>2</h3>
            <div>选择信任</div>
            <p>
              打开手机“设置”>“通用”>“设备管理”
              <br /> 点击“信任”按钮。
            </p>
          </li>
        </ul>
        <ul className="open-ul">
          <li className="ios-three ios-text">
            <h3>3</h3>
            <div>打开 APP</div>
            <p>回到手机桌面,打开APP</p>
          </li>
          <li>
            <img style={{ width: 255, height: 453 }} alt="打开" src={open} />
          </li>
        </ul>
      </div>
    );
  }
}
